<template>
  <el-row class="ms">
    <el-col :span="24">
      <h1 class="tith" id="tith" ref="tith">AI监控中心看板</h1>
      <el-row>
        <el-col :span="1">
          <div class="pwp">
            <p class="point"></p>
            <p class="point"></p>
            <p class="point"></p>
            <p class="point"></p>
            <p class="point"></p>
            <p class="point"></p>
            <p class="point"></p>
          </div>
          <div class="rctwp">
            <p class="rct"></p>
            <p class="rct"></p>
            <p class="rct"></p>
            <p class="rct"></p>
            <p class="rct"></p>
            <p class="rct"></p>
            <p class="rct"></p>
            <p class="rct"></p>
          </div>

          <div class="nullwp"></div>
          &nbsp;
        </el-col>

        <el-col :span="22" class="outwp">
          <div class="zw" ref="zw"></div>
          <div class="mcwp">
            <el-row class="ix1">
              <el-col :span="8" style="padding-right:10px;">
                <div class="mdata">
                  <div class="hd spx">
                    <p>服务部名称</p>
                    <p>在线设备数量</p>
                    <p>离线设备数量</p>
                    <p>故障率</p>
                  </div>
                  <div v-if="msData.length" class="acrow"></div>
                  <Scroll
                    :class-option="optionSetting"
                    :data="msData"
                    class="seamless-warp"
                    ref="seamless-warp"
                  >
                    <div class="mq mqx" :key="item.id" v-for="item in msData">
                      <p v-text="item.name"></p>
                      <p v-text="item.onlinenum"></p>
                      <p v-text="item.offlinenum"></p>
                      <p v-text="item.wrn"></p>
                    </div>
                  </Scroll>
                </div>
              </el-col>
              <el-col :span="16">
                <div class="mdata">
                  <div class="hd">
                    <p>区域</p>
                    <p>公司</p>
                    <p>技术员</p>
                    <p>养户</p>
                    <p>规模</p>
                    <p class="sp">预警时间</p>
                    <p>预警等级</p>
                    <p>异常头数</p>
                    <p>异常人数</p>
                    <p>状态</p>
                    <p>反馈结果</p>
                  </div>
                  <div v-if="maData.length" class="acrow"></div>
                  <Scroll
                    :class-option="optionSetting"
                    :data="maData"
                    class="seamless-warp"
                    ref="seamless-warps"
                  >
                    <div :key="item.id" class="mq" v-for="item in maData">
                      <p v-text="item.area"></p>
                      <p v-text="item.cpy"></p>
                      <p v-text="item.user"></p>
                      <p v-text="item.yh"></p>
                      <p v-text="item.gm"></p>
                      <p class="sp" v-text="item.wrn"></p>
                      <p v-text="item.j" :style="'color:' + item.c"></p>
                      <p v-text="item.wpuser"></p>
                      <p v-text="item.wuser"></p>
                      <p v-text="item.status"></p>
                      <p v-text="item.res"></p>
                    </div>
                  </Scroll>
                </div>
              </el-col>
            </el-row>
            <el-row class="ix2">
              <el-col :span="12" style="padding-right:20px;" class="allH">
                <div class="maps allH">
                  <div class="inmap allH">
                    <h2 class="tith2">预警未处理数量和比例</h2>
                    <div class="cvs" ref="cvs1"></div>
                    <div style="margin:0 5px 5px 5px;border-top:1px solid #fff"></div>
                    <table class="wj">
                      <tr>
                        <th></th>
                        <th :key="item" v-for="item in mzData.xData" v-text="item"></th>
                      </tr>
                      <tr>
                        <td style="text-align:left;padding-left:5px">
                          <span
                            style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#db4a84;"
                          ></span>
                          未处理
                        </td>
                        <td :key="item" v-for="item in mzData.noData" v-text="item"></td>
                      </tr>
                      <tr>
                        <td style="text-align:left;padding-left:5px">
                          <span
                            style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f1f317;"
                          ></span>
                          比例
                        </td>
                        <td
                          :key="item"
                          v-for="item in mzData.bfbData"
                          v-text="item + '%'"
                        ></td>
                      </tr>
                    </table>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" class="allH">
                <div class="maps allH">
                  <div class="inmap allH">
                    <h2 class="tith2">近七日预警总数及等级分布</h2>
                    <div
                      class="cvs"
                      ref="cvs2"
                      style="padding-bottom:120px;margin-bottom:-120px;"
                    >
                      
                    </div>
                    <div style="margin:0 5px 5px 5px;border-top:1px solid #fff"></div>
                    <table class="wj">
                      <tr>
                        <th></th>
                        <th :key="item" v-for="item in mbData.xData" v-text="item"></th>
                      </tr>
                      <tr>
                        <td>
                          <span
                            style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#fff100;"
                          ></span>四级预警
                        </td>
                        <td :key="item" v-for="item in mbData.wrn4" v-text="item"></td>
                      </tr>
                      <tr>
                        <td>
                          <span
                            style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#13fdff;"
                          ></span>三级预警
                        </td>
                        <td :key="item" v-for="item in mbData.wrn3" v-text="item"></td>
                      </tr>
                      <tr>
                        <td>
                          <span
                            style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f5713b;"
                          ></span>二级预警
                        </td>
                        <td :key="item" v-for="item in mbData.wrn2" v-text="item"></td>
                      </tr>
                      <tr>
                        <td>
                          <span
                            style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1bb5f7;"
                          ></span>一级预警
                        </td>
                        <td :key="item" v-for="item in mbData.wrn1" v-text="item"></td>
                      </tr>
                    </table>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>

        <el-col :span="1">
          <div class="pwp r">
            <p class="point"></p>
            <p class="point"></p>
            <p class="point"></p>
            <p class="point"></p>
            <p class="point"></p>
            <p class="point"></p>
            <p class="point"></p>
          </div>
          <div class="rctwp r">
            <p class="rct"></p>
            <p class="rct"></p>
            <p class="rct"></p>
            <p class="rct"></p>
            <p class="rct"></p>
            <p class="rct"></p>
            <p class="rct"></p>
            <p class="rct"></p>
          </div>

          <div class="nullwp r"></div>
          &nbsp;
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<style lang="less" scoped>
.videowp {
  flex: 1;
  display: flex;
  padding: 0 0 35px 10px;
  .in {
    flex: 1;
    border: 1px solid #187781;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    .tith3 {
      margin: 0 0 20px 0;
      padding: 0;
      font-size: 24px;
      color: #fff;
      background: #0a3849;
      line-height: 44px;
      text-align: center;
    }
    .vd {
      width: 100%;
      flex: 1;
    }
  }
}
.mdata {
  position: relative;
  margin-left: 10px;
  border: 1px solid #1a6e6c;
  padding: 10px;
  border-radius: 5px;
  color: #ffffff;
  margin-bottom: 20px;
  .hd {
    &.spx {
      p {
        width: 25%;
      }
    }
    display: flex;
    p {
      width: 8%;
      margin: 0;
      padding: 0;
      font-size: 18px;
      background: #0a3849;
      color: #54f5d9;
      line-height: 28px;
      text-align: center;
    }
  }
}
.ms {
  background: url("../../assets/image/bj.jpg") no-repeat;
  background-size: 100%;
  background-color: #020918;
}
.mwp {
  display: flex;
  align-items: stretch;
}
.tith {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 40px;
  padding: 20px 0;
  border-bottom: 2px solid #0a3849;
  margin-bottom: 20px;
  color: #ffffff;
}
.maps {
  padding-bottom: 40px;
}
.inmap {
  width: 100%;
  height: 100%;
  border: 1px solid #1ffff7;
  border-radius: 5px;
  position: relative;
  .selwp {
    display: flex;
    position: absolute;
    top: 10px;
    right: 0;
    .i {
      min-width: 80px;
      text-align: center;
      color: #fff;
      padding: 5px 20px;
      background: #0a3849;
      border-radius: 10px;
      margin-right: 10px;
      &.ac {
        background: #1ffff7;
      }
    }
  }
}
.pwp {
  position: absolute;
  left: 20px;
  top: 10px;
  &.r {
    left: auto;
    right: 20px;
    top: 75%;
  }
}
.point {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: #1ffff7;
}
.rctwp {
  &.r {
    left: auto;
    right: 10px;
    top: 30%;
  }
  position: absolute;
  left: 10px;
  top: 40%;
}
.rct {
  width: 40px;
  height: 5px;
  background: #1ffff7;
  transform: skewX(-45deg) rotate(30deg);
}
.nullwp {
  &.r {
    left: auto;
    right: 10px;
    top: 10%;
  }
  position: absolute;
  top: 90%;
  width: 20px;
  height: 20px;
  left: 10px;
  border: 3px solid #1ffff7;
  border-radius: 10px;
}
.tith2 {
  font-size: 20px;
  color: #ffffff;
  border-bottom: 2px solid #1ffff7;
  margin: 10px 10px 0 10px;
  line-height: 28px;
  display: inline-block;
  padding-right: 20px;
}

.cvs {
  padding: 50px 0 75px 0;
  margin: -40px 0 -75px 0;
  width: 100%;
  height: 100%;
}
.seamless-warp {
  flex: 1;
  height: 229px;
  overflow: hidden;
  // &:hover{
  //   overflow-y: scroll;
  // }
}
.mq {
  display: flex;
  p {
    width: 8%;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
  }
}
.mqx {
  p {
    width: 25%;
  }
}
.sp {
  width: 20% !important;
}
.acrow {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 38px;
  background: #1ffff7;
  height: 28px;
}
.outwp {
  display: flex;
  .mcwp {
    flex: 1;
    align-items: stretch;
    display: flex;
    flex-direction: column;
    .ix1 {
      margin-bottom: 20px;
      display: flex;
    }
    .ix2 {
      flex: 1;
    }
  }
}
.zw {
  width: 0px;
  overflow: hidden;
}
.allH {
  height: 100%;
}
.wj {
  table-layout: fixed;
  width: 100%;
  color: #fff;
  td,
  th {
    text-align: center;
    font-weight: normal;
  }
}
</style>

<script>
import request from '@/utils/request'
import echarts from "echarts";
import Scroll from "vue-seamless-scroll";
export default {
  computed: {
    optionSetting() {
      return {
        step: 1,
        limitMoveNum: 5,
        singleHeight: 28,
        waitTime: 5000,
      };
    }
  },
  data() {
    return {
      msData: [
        // {
        //   id: 1,
        //   name: "a1",
        //   onlinenum: 1,
        //   offlinenum: 2,
        //   wrn: "20%"
        // },
        // {
        //   id: 1,
        //   name: "a2",
        //   onlinenum: 1,
        //   offlinenum: 2,
        //   wrn: "20%"
        // },
        // {
        //   id: 1,
        //   name: "a3",
        //   onlinenum: 1,
        //   offlinenum: 2,
        //   wrn: "20%"
        // },
        // {
        //   id: 1,
        //   name: "a4",
        //   onlinenum: 1,
        //   offlinenum: 2,
        //   wrn: "20%"
        // },
        // {
        //   id: 1,
        //   name: "a5",
        //   onlinenum: 1,
        //   offlinenum: 2,
        //   wrn: "20%"
        // },
        // {
        //   id: 1,
        //   name: "a",
        //   onlinenum: 1,
        //   offlinenum: 2,
        //   wrn: "20%"
        // },
        // {
        //   id: 1,
        //   name: "a",
        //   onlinenum: 1,
        //   offlinenum: 2,
        //   wrn: "20%"
        // },
        // {
        //   id: 1,
        //   name: "a",
        //   onlinenum: 1,
        //   offlinenum: 2,
        //   wrn: "20%"
        // },
        // {
        //   id: 1,
        //   name: "a",
        //   onlinenum: 1,
        //   offlinenum: 2,
        //   wrn: "20%"
        // },
        // {
        //   id: 1,
        //   name: "a",
        //   onlinenum: 1,
        //   offlinenum: 2,
        //   wrn: "20%"
        // },
        // {
        //   id: 1,
        //   name: "a",
        //   onlinenum: 1,
        //   offlinenum: 2,
        //   wrn: "20%"
        // }
      ],
      maData: [
        // {
        //   id: "123",
        //   area: "南区",
        //   cpy: "运城",
        //   user: "崔",
        //   yh: "崔传世",
        //   gm: "1200",
        //   wrn: "2019-12-12-10:20",
        //   j: "一级",
        //   c: "#f00",
        //   wpuser: "3",
        //   wuser: "3",
        //   status: "未处理",
        //   res: "正常卖主"
        // },
        // {
        //   id: "123",
        //   area: "南区",
        //   cpy: "运城",
        //   user: "崔",
        //   yh: "崔传世",
        //   gm: "1200",
        //   wrn: "2019-12-12-10:20",
        //   j: "一级",
        //   c: "#f00",
        //   wpuser: "3",
        //   wuser: "3",
        //   status: "未处理",
        //   res: "正常卖主"
        // },
        // {
        //   id: "123",
        //   area: "南区",
        //   cpy: "运城",
        //   user: "崔",
        //   yh: "崔传世",
        //   gm: "1200",
        //   wrn: "2019-12-12-10:20",
        //   j: "一级",
        //   c: "#f00",
        //   wpuser: "3",
        //   wuser: "3",
        //   status: "未处理",
        //   res: "正常卖主"
        // },
        // {
        //   id: "123",
        //   area: "南区",
        //   cpy: "运城",
        //   user: "崔",
        //   yh: "崔传世",
        //   gm: "1200",
        //   wrn: "2019-12-12-10:20",
        //   j: "一级",
        //   c: "#f00",
        //   wpuser: "3",
        //   wuser: "3",
        //   status: "未处理",
        //   res: "正常卖主"
        // },
        // {
        //   id: "123",
        //   area: "南区",
        //   cpy: "运城",
        //   user: "崔",
        //   yh: "崔传世",
        //   gm: "1200",
        //   wrn: "2019-12-12-10:20",
        //   j: "一级",
        //   c: "#f00",
        //   wpuser: "3",
        //   wuser: "3",
        //   status: "未处理",
        //   res: "正常卖主"
        // },
        // {
        //   id: "123",
        //   area: "南区",
        //   cpy: "运城",
        //   user: "崔",
        //   yh: "崔传世",
        //   gm: "1200",
        //   wrn: "2019-12-12-10:20",
        //   j: "一级",
        //   c: "#f00",
        //   wpuser: "3",
        //   wuser: "3",
        //   status: "未处理",
        //   res: "正常卖主"
        // },
        // {
        //   id: "123",
        //   area: "南区",
        //   cpy: "运城",
        //   user: "崔",
        //   yh: "崔传世",
        //   gm: "1200",
        //   wrn: "2019-12-12-10:20",
        //   j: "一级",
        //   c: "#000",
        //   wpuser: "3",
        //   wuser: "3",
        //   status: "未处理",
        //   res: "正常卖主"
        // },
        // {
        //   id: "123",
        //   area: "南区",
        //   cpy: "运城",
        //   user: "崔",
        //   yh: "崔传世",
        //   gm: "1200",
        //   wrn: "2019-12-12-10:20",
        //   j: "一级",
        //   c: "#fff",
        //   wpuser: "3",
        //   wuser: "3",
        //   status: "未处理",
        //   res: "正常卖主"
        // }
      ],
      mzData: {
        // xData: [
        //   "和抗原",
        //   "和抗原",
        //   "和抗原",
        //   "和抗原",
        //   "和抗原",
        //   "和抗原",
        //   "和抗原",
        //   "和抗原"
        // ],
        // noData: [10, 20, 30, 40, 50, 22, 21, 18],
        // bfbData: [10, 20, 30, 40, 50, 12, 5, 19],
        // larea: [0, 250],
        // rarea: [0, 50]
      },
      mbData: {
        // xData: [
        //   "和抗原1",
        //   "和抗原2",
        //   "和抗原3",
        //   "和抗原4",
        //   "和抗原5",
        //   "和抗原6",
        //   "和抗原7",
        //   "和抗原8"
        // ],
        // wrn1: [320, 320, 320, 320, 320, 320, 320, 320],
        // wrn2: [320, 320, 320, 320, 320, 320, 320, 320],
        // wrn3: [320, 320, 320, 320, 320, 320, 320, 320],
        // wrn4: [320, 320, 320, 320, 320, 320, 320, 320]
      }
    };
  },
  components: {
    Scroll
  },
  methods: {
    drawZW({ xData, noData, bfbData, larea, rarea } = obj) {
      const myChart = echarts.init(this.$refs.cvs1);
      myChart.setOption({
        tooltip: {
          formatter: function(params) {
            //数据单位格式化
            var relVal = params[0].name; //x轴名称
            for (var i = 0, l = params.length; i < l; i++) {
              // console.log(params[i].marker);
              relVal +=
                "<br />" +
                params[i].marker.replace(/\[.*?\]/, "#de4a82") +
                params[i].seriesName +
                params[i].value +
                (params[i].seriesName.indexOf("比例") > -1 ? "%" : "");
            }

            return relVal;
          },
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#283b56"
            }
          }
        },
        toolbox: {
          show: false,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          textStyle: {
            color: "#fff"
          },
          data: ["未处理", "比例"]
        },
        xAxis: [
          {
            axisLine: {
              //x轴
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ffffff"
              }
            },
            splitLine: {
              show: false
            },
            type: "category",
            data: xData,
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            axisLine: {
              //y轴
              show: false
            },
            splitLine: {
              show: false
            },
            type: "value",
            name: "",
            min: larea[0],
            max: larea[1],
            interval: 200,
            axisLabel: {
              textStyle: {
                color: "#ffffff"
              },
              formatter: "{value}"
            }
          },
          {
            axisLine: {
              //x轴
              show: false
            },
            splitLine: {
              show: false
            },
            type: "value",
            name: "",
            min: rarea[0],
            max: rarea[1],
            interval: 10,
            axisLabel: {
              textStyle: {
                color: "#ffffff"
              },
              formatter: "{value}%"
            }
          }
        ],
        series: [
          {
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#de4a82" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#4f64e8" // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            },
            name: "未处理",
            type: "bar",
            data: noData
          },
          {
            smooth: true,
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: "#e9ea1f",
                lineStyle: {
                  color: "#b1ddfd" //折线颜色
                }
              }
            },
            name: "比例",
            type: "line",
            yAxisIndex: 1,
            data: bfbData
          }
        ]
      });
    },
    drawZ({ xData, wrn1, wrn2, wrn3, wrn4 } = obj) {
      const myChart = echarts.init(this.$refs.cvs2);
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line" // 默认为直线，可选为：'line' | 'shadow'
          },
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#283b56"
            }
          }
        },
        legend: {
          show: false,
          data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          axisLine: {
            //x轴
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff"
            }
          },
          splitLine: {
            show: false
          },
          type: "category",
          data: xData
        },
        yAxis: {
          axisLine: {
            //y轴
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#ffffff"
            }
          },
          splitLine: {
            show: false
          },
          type: "value"
        },
        series: [
          {
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#4378e5" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#0fc6ff" // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            },
            name: "一级预警",
            type: "bar",
            stack: "总量",
            label: {
              show: false,
              position: "insideRight"
            },
            data: wrn1
          },
          {
            itemStyle: {
              normal: {
                color: "#f5713b"
              }
            },
            name: "二级预警",
            type: "bar",
            stack: "总量",
            label: {
              show: false,
              position: "insideRight"
            },
            data: wrn2
          },
          {
            itemStyle: {
              normal: {
                color: "#14feff"
              }
            },
            name: "三级预警",
            type: "bar",
            stack: "总量",
            label: {
              show: false,
              position: "insideRight"
            },
            data: wrn3
          },
          {
            itemStyle: {
              normal: {
                color: "#fff100"
              }
            },
            name: "四级预警",
            type: "bar",
            stack: "总量",
            label: {
              show: false,
              position: "insideRight"
            },
            data: wrn4
          }
        ]
      });
    },
    draw() {
      this.drawZ(this.mbData);
      this.drawZW(this.mzData);
    },
    setH() {
      return new Promise(r => {
        const WH = (document.documentElement || document.body).offsetHeight,
          TH = this.$refs.tith.offsetHeight;

        this.$refs.zw.style.height = WH - TH - 20 + "px";
        this.$nextTick(() => {
          r(1);
        });
      });
    }
  },
  mounted() {

    // 获取滚轮
    // const Obj = this.$refs['seamless-warp'].$el;
    // Obj.onmouseleave = function(e){
    //   Obj.scrollTop = 0;
    // }
    // const Obj1 = this.$refs['seamless-warps'].$el;
    // Obj1.onmouseleave = function(e){
    //   Obj1.scrollTop = 0;
    // }
    
    // 获取数据
        request({
          url: '/aiboard/camera/selectCameraOnAndOffList',
          method: 'post'
        }).then(res => {
          //console.log(res.data);
          this.msData = res.data;
        });

        request({
          url: '/aiboard/warn/selectAiWarnListByUserId',
          method: 'post'
        }).then(res => {
          //console.log(res.data);
          this.maData = res.data;
        });

    this.setH().then(
      r => {
        Promise.all([        request({
          url: '/aiboard/warn/selectUntreatedWarnAmount',
          method: 'post'
        }).then(res => {
          this.mzData = res.data;
          //console.log(res.data);
          //this.msData = res.data;
        }),

        request({
          url: '/aiboard/warn/selectWarnDistribute',
          method: 'post'
        }).then(res => {
          this.mbData = res.data;
          //console.log(res.data);
          //this.msData = res.data;
        })]).then(()=>{
          this.draw();
        })
        
        // 跑定时任务5分钟刷新一次
        setTimeout(() => {
          window.location.reload(true);
        }, 1000 * 60 * 10);
      },
      () => {}
    );
  }
};
</script>
